<template>
	<view class="" style="">
		<square ref="square" v-show="tabIndex == 0" @disconnectWallet="disconnectWallet"></square>
		<community ref="community" v-show="tabIndex == 1"></community>
		<message ref="message" v-show="tabIndex == 2"></message>
		<user ref="user" v-show="tabIndex == 3"></user>
		<uv-tabbar :value="tabIndex" :fixed="true" activeColor="#EB7520" inactiveColor="#B7C0CA" @change="tabbarChange">
			<uv-tabbar-item text="任务广场">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/tab1-select.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/tab1.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="社区">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/tab2-select.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/tab2.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="消息">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/tab3-select.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/tab3.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/tab4-select.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/tab4.png"></image>
				</template>
			</uv-tabbar-item>
		</uv-tabbar>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import square from "@/components/tabbar/square/square.vue"
	import community from "@/components/tabbar/community/community.vue"
	import message from "@/components/tabbar/message/message.vue"
	import user from "@/components/tabbar/user/user.vue"
	export default {
		components: {
			square,
			community,
			message,
			user
		},
		data() {
			return {
				tabIndex: 0
			}
		},
		onLoad(parm) {
			if (parm.errorCode == 401) {
				this.$cookie.removeAddressToken()
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		},
		onShow() {
			this.notice()
		},
		methods: {
			disconnectWallet() {
				this.$refs.user.clearUserData()
			},
			tabbarChange(index) {
				if (index == 1 || index == 2) {
					this.$refs.toast.show({msg: '开发中, 敬请期待...'})
				} else {
					this.tabIndex = index
				}
				this.notice()
			},
			notice() {
				this.$nextTick(() => {
					if (this.tabIndex == 0) {
						this.$refs.square.show()
					} else if (this.tabIndex == 3) {
						if (this.$cookie.isConnected()) {
							this.$refs.user.show()
						} else{
							this.$refs.user.clearUserData()
						}
						
					}
				})
			}
		}
	}
</script>

<style>
	.icon {
		width: 19px;
		height: 19px;
	}
</style>